<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="inc/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <%@ include file="inc/meta.jsp" %>
    <meta name="description" content="">
    <meta name="author" content="">
    <title>投放视频</title>
    <%@ include file="inc/css.jsp" %>
</head>
<body>

<div id="videos" class="wrapper">

    <%@ include file="inc/nav.jsp" %>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">视频列表</h1>
                <h4 style="margin-left: 10px;">——投放视频</h4>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <form id="infoForm" method="post" action="company/video/saveRecord" class="form-horizontal" role="form">
                            <input type="hidden" name="videoId" value="${video.id}"/>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">视频名称:</label>

                                <div class="col-sm-4" style="padding-top: 6.5px;">
                                    ${video.name}
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">投放区域:</label>

                                <div class="col-sm-4" style="padding-top: 6.5px;">
                                    <input type="radio" name="areaType" onclick="_companyVideoRecord.fn.changeRadio(0)" value="0" checked/>不限
                                    &nbsp;&nbsp;
                                    <input type="radio" name="areaType" onclick="_companyVideoRecord.fn.changeRadio(1)" value="1"/>省/市/区
                                </div>
                            </div>

                            <div class="form-group" id="recordInfoDiv" style="display: none">
                                <label class="col-sm-2 control-label"></label>

                                <div class="col-sm-10" style="padding-top: 1.5px;">
                                    <div class="navbar-form navbar-left">
                                        <div class="form-group">
                                            <label>省份：</label>
                                            <select id="provinceList" style="width: 150px;" class="form-control"></select>
                                        </div>
                                        &nbsp;&nbsp;
                                        <div class="form-group" style="margin-left: 20px;">
                                            <label>城市：</label>
                                            <select id="cityList" style="width: 150px;" class="form-control">
                                                <option value="">请选择城市</option>
                                            </select>
                                        </div>
                                        &nbsp;&nbsp;
                                        <div class="form-group" style="margin-left: 20px;">
                                            <label>区域：</label>
                                            <select id="areaList" style="width: 150px;" class="form-control">
                                                <option value="">请选择区域</option>
                                            </select>
                                        </div>
                                        &nbsp;&nbsp;
                                        <div class="form-group" style="margin-left: 20px;">
                                            <a href="javascript:void(0)" class="btn btn-success btn-sm" role="button" onclick="_companyVideoRecord.fn.addAddressInfo()">添加</a>
                                        </div>
                                    </div>
                                    <br/>
                                    <div id="addressInfoDiv" style="width: 80%;border: 1px dashed #446a89;height: 150px;margin-top: 40px;"></div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">投放时间:</label>

                                <div class="col-sm-4" style="padding-top: 1.5px;">
                                    <input type="text" class="form-control input-append date form_datetime" style="width: 180px;" readonly id="startTime" name="startTime" maxlength="20" placeholder="请选择投放时间"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">广告单价:</label>

                                <div class="col-sm-4" style="padding-top: 1.5px;width: 200px;">
                                    <input type="number" id="price" name="price" class="form-control" onblur="_companyVideoRecord.fn.changeMoney()" value="0"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">投放次数:</label>

                                <div class="col-sm-4" style="padding-top: 1.5px;width: 200px;">
                                    <input type="number" id="count" name="count" class="form-control" onblur="_companyVideoRecord.fn.changeMoney()" value="0"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>

                                <div class="col-sm-6" style="padding-top: 1.5px;font-size: x-small">
                                    <input type="checkbox" name="isOnly" value="1" checked/>
                                    限制每位用户仅能获得一次奖励
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label"></label>

                                <div class="col-sm-6" style="padding-top: 1.5px;font-size: x-small">
                                    <input type="checkbox" name="isSend" value="1" checked/>
                                    允许用户投放简历
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">需冻结金额:</label>

                                <div class="col-sm-4" style="padding-top: 6.5px;">
                                    <span id="staticMoneySpan">￥0</span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-sm-12" style="text-align: center">
                                    <a href="javascript:void(0)" onclick="_companyVideoRecord.fn.subInfo()" class="btn btn-info" role="button">确定投放</a>
                                    <a href="company/video/index" class="btn btn-primary" role="button">返回</a>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.panel-body -->

                </div>
            </div>
        </div>

    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<%@ include file="inc/footer.jsp" %>

</body>

<script type="text/javascript">
    var _companyVideoRecord = {
        fn: {
            init: function () {
                $('.form_datetime').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    forceParse: 0,
                    showMeridian: 1,
                    format: 'yyyy-mm-dd hh:ii'
                });

                _companyVideoRecord.fn.getProvinceList();

                $('#provinceList').change(function () {
                    _companyVideoRecord.fn.getCityList($(this).val());
                    $('#areaList').html('<option value="">请选择区域</option>');
                });

                $('#cityList').change(function () {
                    _companyVideoRecord.fn.getAreaList($(this).val());
                });
            },
            changeRadio: function (flag) {
                if (flag == 0) {
                    $('#recordInfoDiv').css('display', 'none');
                } else {
                    $('#recordInfoDiv').css('display', '');

                    $('#provinceList').val('');
                    $('#cityList').html('<option value="">请选择城市</option>');
                    $('#areaList').html('<option value="">请选择区域</option>');
                    $('#addressInfoDiv').html('');
                }
            },
            changeMoney: function () {
                var flag = true;
                var price = $('#price').val();
                var count = $('#count').val();

                if (null == price || price == '') {
                    $leoman.notify("请输入广告单价", "error");
                    flag = false;
                    return;
                }

                if (null == count || count == '') {
                    $leoman.notify("请输入投放次数", "error");
                    flag = false;
                    return;
                }

                if (Number(price) <= Number(0)) {
                    $leoman.notify("广告单价需大于0", "error");
                    flag = false;
                    return;
                }

                if (!(/^(\+|-)?\d+$/.test(count)) || count <= 0) {
                    $leoman.notify("投放次数需为正整数", "error");
                    flag = false;
                    return;
                }

                $('#staticMoneySpan').html('￥' + price * count);
                return flag;
            },
            addAddressInfo: function () {
                var num = 0;
                $.each($("#addressInfoDiv span"), function () {
                    num++;
                });

                if (num >= 20) {
                    $leoman.notify("最多选择20个区域", "error");
                    return;
                }

                var content = '';
                var flag = true;

                var areaId = $('#areaList option:selected').val();
                var areaText = $('#areaList option:selected').text();

                if (null != areaId && areaId != '') {
                    content = '<input type="hidden" value="' + areaId + '" /><span style="float: left;margin-left: 20px;margin-top: 3px;width: 110px">' + areaText + '</span><div style="float:left;margin-top: 3px;cursor: pointer;color: red" onclick="_companyVideoRecord.fn.removeSpan(this)">X</div>';
                } else {
                    $leoman.notify("请先选择区域", "error");
                    flag = false;
                    return;
                }

                $.each($("#addressInfoDiv span"), function () {
                    if ($(this).prev().val() == areaId) {
                        $leoman.notify("已经添加过该区域", "error");
                        flag = false;
                        return;
                    }
                });

                if (flag) {
                    $('#addressInfoDiv').append(content);
                }
            },
            removeSpan: function (self) {
                $(self).prev().remove();
                $(self).remove();
            },
            subInfo: function () {
                var flag = true;
                var startTime = $('#startTime').val();
                var num = 0;
                var type = $('input[name="areaType"]:checked').val();
                var regionIds = '';
                var regionNames = '';

                if (type == 1) {
                    $.each($("#addressInfoDiv span"), function () {
                        regionIds += $(this).prev().val() + ',';
                        regionNames += $(this).html() + ',';
                        num++;
                    });

                    if (num == 0) {
                        $leoman.notify("请选择投放区域", "error");
                        return;
                    } else {
                        regionIds = regionIds.substring(0, regionIds.length - 1);
                        regionNames = regionNames.substring(0, regionNames.length - 1);
                    }
                }

                if (null == startTime || startTime == '') {
                    $leoman.notify("请选择投放时间", "error");
                    flag = false;
                    return;
                }

                if (flag) {
                    flag = _companyVideoRecord.fn.changeMoney();
                }

                // 所有的验证通过后，执行新增操作
                if (flag) {
                    $("#infoForm").ajaxSubmit({
                        url: _basePath + "company/video/saveRecord",
                        dataType: "json",
                        data: {
                            regionIds: regionIds,
                            regionNames: regionNames
                        },
                        success: function (result) {
                            if (result > 0) {
                                $leoman.notify("操作成功", "success");
                            } else {
                                $leoman.notify("操作失败", "error");
                            }
                        }
                    });
                }
            },
            getProvinceList: function () {
                $leoman.ajax("common/provinceList", null, function (result) {
                    if (null != result) {
                        var content = "<option value=''>请选择省份</option>";
                        jQuery.each(result, function (i, item) {
                            content += "<option value='" + item.id + "'>" + item.name + "</option>";
                        });
                        $('#provinceList').append(content);
                    } else {
                        $leoman.notify("获取省份信息失败", "error");
                    }
                });
            },
            getCityList: function (provinceId) {
                $('#cityList').html('');

                $leoman.ajax("common/cityList", {
                    provinceId: provinceId
                }, function (result) {
                    if (null != result) {
                        var content = "<option value=''>请选择城市</option>";
                        jQuery.each(result, function (i, item) {
                            content += "<option value='" + item.id + "'>" + item.name + "</option>";
                        });
                        $('#cityList').append(content);
                    } else {
                        $leoman.notify("获取城市信息失败", "error");
                    }
                });
            },
            getAreaList: function (cityId) {
                $('#areaList').html('');

                $leoman.ajax("common/areaList", {
                    cityId: cityId
                }, function (result) {
                    if (null != result) {
                        var content = "<option value=''>请选择区域</option>";
                        jQuery.each(result, function (i, item) {
                            content += "<option value='" + item.id + "'>" + item.name + "</option>";
                        });
                        $('#areaList').append(content);
                    } else {
                        $leoman.notify("获取区域信息失败", "error");
                    }
                });
            }
        }
    }

    $(document).ready(function () {
        _companyVideoRecord.fn.init();
    });

</script>

</html>